<template>
	<div class="shop-header" >
		<nav class="shop-nav" :style="{backgroundImage: 'url(' + info.bgImg + ')'}">
			<a class="back" @click="$router.back()">
				<i class="iconfont icon-arrow-left1"></i>
			</a>
		</nav>

		<div class="shop-content" @click="shopShow">
			<img class="content-image" :src="info.avatar">
			<div class="header-content">
				<h2 class="content-title">
					<span class="content-tag">
						<span class="mini-tag">品牌</span>
					</span>
					<span class="content-name">{{info.name}}</span>
					<i class="content-icon"></i>
				</h2>
				<div class="shop-message">
					<span class="shop-message-detail">{{info.score}}</span>
					<span class="shop-message-detail">月售{{info.sellCount}}单</span>
					<span class="shop-message-detail">
						{{info.description}}
						<span>约{{info.deliveryTime}}分钟</span>
					</span>
					<span class="shop-message-detail">距离{{info.distance}}</span>
				</div>
			</div>
		</div>

		<div class="shop-header-discounts" @click="activityShow" v-if="info.supports">
			<div class="discounts-left">
				<div class="activity">
					<div class="content-tag" :class="tagBgc[info.supports[0].type]">
						<span class="mini-tag">
							<!-- 首单 -->
							{{info.supports[0].name}}
						</span>
					</div>
					</span>
					<span class="activity-content ellipsis">
						<!-- 新用户下单立减17元 -->
						{{info.supports[0].content}}
					</span>
				</div>
			</div>
			<div class="discounts-right">
				{{info.supports.length}}个优惠
				<i class="content-icon"></i>
			</div>
		</div>
		
		<transition name="fade">
		  <div class="shop-brief-modal" v-show="isShopShow">
		    <div class="brief-modal-content">
		      <h2 class="content-title">
		        <span class="content-tag">
		          <span class="mini-tag">品牌</span>
		        </span>
		        <span class="content-name">{{info.name}}</span>
		      </h2>
		      <ul class="brief-modal-msg">
		        <li>
		          <h3>{{info.score}}</h3>
		          <p>评分</p>
		        </li>
		        <li>
		          <h3>{{info.sellCount}}单</h3>
		          <p>月售</p>
		        </li>
		        <li>
		          <h3>{{info.description}}</h3>
		          <p>约{{info.deliveryTime}}分钟</p>
		        </li>
		        <li>
		          <h3>{{info.deliveryPrice}}元</h3>
		          <p>配送费用</p>
		        </li>
		        <li>
		          <h3>{{info.distance}}</h3>
		          <p>距离</p>
		        </li>
		      </ul>
		      <h3 class="brief-modal-title">
		        <span>公告</span>
		      </h3>
		      <div class="brief-modal-notice">
		        {{info.bulletin}}
		      </div>
		      <div class="mask-footer" @click="shopShow">
		        <span class="iconfont icon-searchclose"></span>
		      </div>
		    </div>
		    <div class="brief-modal-cover"></div>
		  </div>
		</transition>
		
		<transition name="move">
		  <div class="activity-sheet" v-show="isActivityShow">
		    <div class="activity-sheet-content">
		      <h2 class="activity-sheet-title">优惠活动</h2>
		      <ul class="list">
		        <li class="activity-item" v-for="(support, index) in info.supports"
		            :key="index" :class="tagBgc[support.type]">
		          <span class="content-tag">
		            <span class="mini-tag">{{support.name}}</span>
		          </span>
		          <span class="activity-content">{{support.content}}</span>
		        </li>
		      </ul>
		      <div class="activity-sheet-close" @click="activityShow">
		        <span class="iconfont icon-searchclose"></span>
		      </div>
		    </div>
		    <div class="activity-sheet-cover"></div>
		  </div>
		</transition>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tagBgc: ['green', 'red', 'orange'],
				isActivityShow: false,
				isShopShow: false,
				info: {}
			}
		},
		created() {
			
		},
		methods: {
			shopShow() {
			  this.isShopShow = !this.isShopShow
			},
			activityShow() {
			  this.isActivityShow = !this.isActivityShow
			}
		},
		props: {
			shopInfo: {
				type: Object,
				default: {},
			}
		},
		watch: {
			shopInfo(newValue){
				this.$nextTick(()=>{
					this.info = newValue
				})
			}
		}
		
	}
</script>

<style lang="less" scoped>
	.content-icon {
		display: inline-block;
		width: 0;
		height: 0;
		border: 8px solid transparent;
		border-left-color: #000;
		margin-left: 10px;
		vertical-align: middle;
	}

	.shop-header {

		// 导航
		.shop-nav {
			background-size: cover;
			background-repeat: no-repeat;
			height: 40px;
			padding: 5px 10px;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(119, 103, 137, .43);
			}

			.back {
				position: absolute;
				z-index: 3;
				color: #fff;
				top: 50%;
				transform: translateY(-50%);

				.iconfont {
					font-size: 25px;
				}
			}
		}

		// 主体
		.shop-content {
			margin-top: -30px;
			position: relative;
			z-index: 2;

			.content-image {
				width: 90px;
				height: 90px;
				display: block;
				margin: 0 auto;
			}

			.header-content {
				text-align: center;
				margin-top: 10px;

				.content-title {
					.content-tag {
						border-radius: 2px;
						background-image: linear-gradient(90deg, #fff100, #ffe339);
						width: 36px;
						height: 18px;
						margin-right: 10px;
						color: #6a3709;
						font-style: normal;
						font-weight: bold;
						display: inline-block;
						position: relative;

						.mini-tag {
							font-size: 14px;
							width: 100%;
							font-weight: bold;
						}
					}

					.content-name {
						display: inline-block;
						font-size: 20px;
						color: #000;
						font-weight: bold;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						max-width: 50%;
						vertical-align: bottom;
					}

				}

				.shop-message {
					margin-top: 10px;
					font-size: 0;

					.shop-message-detail {
						color: #999;
						font-size: 13px;
						position: relative;
						margin-right: 10px;

						&:last-child {
							margin-right: 0;

							&::after {
								display: none;
							}
						}

						&::after {
							position: absolute;
							content: '';
							width: 2px;
							height: 2px;
							border: 50%;
							background-color: #999;
							top: 50%;
							margin-top: -1px;
							right: -5px;
						}
					}
				}
			}
		}

		.shop-header-discounts {
			width: 75%;
			margin: 10px auto;
			display: flex;
			align-items: center;
			font-size: 13px;
			border: 1px solid #eee;
			padding: 5px 7px;
			color: #666;

			.discounts-left {
				overflow: hidden;
				flex: 1;

				.activity {
					.content-tag {
						font-size: 10px;
						margin-right: 5px;
						display: inline-block;

						&.green {
							background: green;
						}

						&.red {
							background: red;
						}

						&.orange {
							background: orange;
						}

						.mini-tag {
							color: #fff;
							padding: 2px 4px;
							display: inline-block;
						}
					}

					.activity-content {
						display: inline-block;
						width: 70%;
					}
				}
			}

			.discounts-right {
				position: relative;
				width: 50px;
				padding-right: 10px;

				.content-icon {
					border-left-color: transparent;
					border-top-color: #666;
					border-width: 5px;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					margin-top: 3px;
				}
			}
		}
	}
	
	.shop-brief-modal{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 52;
		flex-direction: column;
		color: #333;
		.brief-modal-cover{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, .5);
			z-index: 1;
		}
		.brief-modal-content{
			position: relative;
			width: 80%;
			padding: 25px 20px;
			border-radius: 5px;
			background: #fff;
			z-index: 99;
			display: flex;
			flex-direction: column;
			.content-title{
				font-size: 20px;
				line-height: 24px;
				font-weight: 700;
				white-space: nowrap;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				> span{
					font-weight: 600;
				}
				.content-tag{
					border-radius: 2px;
					background-image: linear-gradient(90deg, #fff100, #ffe339);
					width: 36px;
					height: 18px;
					margin-right: 10px;
					color: #6a3709;
					font-style: normal;
					position: relative;
				}
				.mini-tag{
					position :absolute;
					left: 0;
					top: 0;
					right: -100%;
					bottom :-100%;
					font-size: 24px;
					transform: scale(.5);
					transform-origin: 0 0;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.brief-modal-msg{
				display: flex;
				margin: 20px -10px 0;
				> li{
					flex :1;
					text-align: center;
					> h3{
						font-size: 15px;
						font-weight: 600;
						color: #333;
						margin-bottom: 8px;
					}
					> p{
						font-size: 12px;
						color: #999;
					}
				}
			}
			.brief-modal-title{
				position: relative;
				text-align: center;
				margin: 15px auto 15px;
				width: 85px;
				background-image: linear-gradient(90deg, #fff, #333 50%, #fff);
				background-size: 100% 1px;
				background-position :50%;
				background-repeat: no-repeat;
				> span{
					font-size:12px;
					padding:0 6px;
					color:#999;
					background-color: #fff;
				}
				  
			}
			.brief-modal-notice{
				font-size :13px;
				line-height: 1.54;
				color :#333;
				overflow-y:auto;
			}
			 .mask-footer{
				 position: absolute;
				 bottom: -60px;
				 left: 50%;
				 padding :6px;
				 border: 1px solid rgba(255, 255, 255, .7);
				 border-radius: 50%;
				 transform :translateX(-50%);
				 span{
					 font-size: 16px;
					 color: rgba(255, 255, 255, .7);
				 }
			 }  
		}
	}
	 
	 
	
	.activity-sheet{
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index :99;
	  &.move-enter-active, &.move-leave-active{
	    transition: opacity .3s;
		}
	  &.move-enter-active, &.move-leave-active{
	    opacity :0;
		}
	  .activity-sheet-content{
	    position: absolute;
	    background-color: #f5f5f5;
	    box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, .4);
	    bottom: 0;
	    left: 0;
	    right :0;
	    z-index :100;
	    padding: 20px 30px;
	    box-sizing: border-box;
	    transition: transform .2s;
	    will-change :transform;
	    color: #333;
	    .activity-sheet-title{
	      text-align: center;
	      font-size: 20px;
	      font-weight :600;
	      margin-bottom: 20px;
			}
	    .list{
	      font-size: 16px;
	      height: 160px;
	      overflow-y :auto;
	      .activity-item{
	        margin-bottom: 12px;
	        display: flex;
	        font-size :13px;
	        align-items :center;
	        &.green{
	          .content-tag{
							background-color: rgb(112, 188, 70);
						}
					}
	        &.red{
	          .content-tag{
	            background-color: rgb(240, 115, 115);
						}
					}
	        &.orange{
	          .content-tag{
	            background-color: rgb(241, 136, 79);
						}
					}
	        .content-tag{
	          display: inline-block;
	          border-radius :2px;
	          width: 36px;
	          height: 18px;
	          margin-right: 10px;
	          color: #fff;
	          font-style :normal;
	          position: relative;
	          .mini-tag{
	            position :absolute;
	            left: 0;
	            top: 0;
	            right :-100%;
	            bottom :-100%;
	            font-size: 24px;
	            transform: scale(.5);
	            transform-origin: 0 0;
	            display: flex;
	            align-items :center;
	            justify-content :center;
						}
					}
				}
			}
	    .activity-sheet-close{
	      position: absolute;
	      right: 6px;
	      top: 10px;
	      width :25px;
	      height :25px;
	      > span{
					font-size: 20px;
				}
			}
		}
	  .activity-sheet-cover{
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    background-color: rgba(0, 0, 0, .5);
	  }
	}
	   
	
	    
</style>
